<template>
  <div class="container">
    <el-card>
      <!-- 搜索区域 -->
      <el-form label-width="80px" :model="queryInfo" ref="searchRef">
        <el-row :gutter="20">
          <el-col :span="6">
            <!-- 标签名称 -->
            <el-form-item label="标签名称" prop="tags">
              <el-input
                placeholder="请输入"
                v-model="queryInfo.tags"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- 地区选择器 -->
          <el-col :span="6">
            <el-form-item label="城市" prop="city">
              <el-select
                v-model="queryInfo.city"
                @change="cityChild"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in cityDataList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 地区选择器 -->
          <el-col :span="6">
            <el-form-item label="地区" prop="province">
              <el-select v-model="queryInfo.province" placeholder="请选择">
                <el-option
                  v-for="(item, index) in regionDataList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 企业简介 -->
          <el-col :span="6">
            <el-form-item label="企业简称" prop="shortName">
              <el-input v-model="queryInfo.shortName" clearable></el-input>
            </el-form-item>
          </el-col>

          <!-- 状态 -->
          <el-col :span="6">
            <el-form-item label="状态" prop="state">
              <el-select v-model="queryInfo.state" placeholder="请选择">
                <el-option
                  v-for="(item, index) in statuaOptions"
                  :value="item"
                  :key="item.key"
                  :label="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 清除/搜索按钮 -->
          <el-col :span="6" class="col-btn">
            <el-form-item>
              <el-button @click="clearfrom" size="small">清除</el-button>
              <el-button type="primary" size="small" @click="search"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <!-- 新增用户按钮 -->
          <el-col :span="12" class="col-icon">
            <el-form-item>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="isShowUserdialog = true"
                >新增用户</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- /搜索区域 -->
      <!-- 提示框 -->
      <el-alert
        :title="`共${counts}条数据`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>

      <!-- 表格区域 -->
      <el-table :data="companysDateList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="number"
          label="企业编号"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shortName"
          label="企业简称"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="80" align="center">
        </el-table-column>
        <el-table-column
          prop="creatorID"
          label="创建者"
          width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="addDate" label="创建时间" align="center">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString('{y}-{m}-{d} {h}:{m}:{s}') }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" align="center">
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="{ row }">
            {{ row.state === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="250px">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              plain
              circle
              icon="el-icon-edit"
              @click="EdituseDialog(row.id)"
            ></el-button>
            <el-tooltip
              class="item"
              effect="dark"
              :content="row.state === 1 ? '禁用' : '启用'"
              placement="top-start"
            >
              <el-button
                :type="row.state === 1 ? 'warning' : 'success'"
                plain
                circle
                :icon="row.state === 1 ? 'el-icon-close' : 'el-icon-check'"
                @click="changeState(row.id, row.state)"
              ></el-button>
            </el-tooltip>

            <el-button
              type="danger"
              plain
              circle
              icon="el-icon-delete"
              @click="deletecompanys(row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- table结束 -->
      <!-- 分页 :paginationPage="queryInfo.page" :paginationPagesize="queryInfo.pagesize"-->
      <pageTool
        class="pagetool"
        :total="counts"
        :queryInfo="queryInfo"
        @pageChange="pageChange"
        @pageSizeChange="pageSizeChange"
      ></pageTool>
      <!-- 分页 -->
      <!-- 添加用户对话框 -->
      <companys-add
        :isShowUserdialog.sync="isShowUserdialog"
        :editId.sync="editId"
        @updatelist="updateuserlist"
        ref="companysref"
      />
      <!-- /添加用户对话框 -->
    </el-card>
  </div>
</template>
<script>
import { companyslist, remove, disabled } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
import pageTool from '../../module-dashboard/components/pageTool'
import companysAdd from '../components/companys-add'
export default {
  name: '',
  components: {
    pageTool,
    companysAdd
  },
  props: {},
  data() {
    return {
      companysDateList: [], // 表格数据
      regionDataList: [], // 所有地区
      cityDataList: [], // 所有城市
      // SearchForm: {
      //   // 表单对象
      //   tagname: '',
      //   city: '',
      //   region: '',
      //   introduction: '',
      //   //状态选择框绑定的值
      //   statusValue: ''
      // },
      // 状态选择框
      statuaOptions: { 启用: 1, 禁用: 0 },
      queryInfo: {
        page: 1, // page否1当前页数
        pagesize: 10, // pagesize否10页尺寸
        tags: '',
        shortName: ''
      },
      counts: null,
      // 控制添加用户对话框
      isShowUserdialog: false,
      editId: 0,
      currentRowdate: {}
    }
  },
  computed: {},
  watch: {},
  methods: {
    // 监听选择框change事件 参数是当前拿到的新值
    cityChild(e) {
      this.regionDataList = citys(e)
      // this.SearchForm.region = this.regionDataList[0]
    },
    // 清除表单
    clearfrom() {
      this.$refs.searchRef.resetFields()
      this.loadCompanys()
    },
    // 获取所有企业管理列表
    async loadCompanys() {
      const res = await companyslist(this.queryInfo)
      console.log(res.data.items)
      this.companysDateList = res.data.items
      // console.log(this.companysDateList)
      this.counts = res.data.counts
    },
    pageChange(newvalue) {
      // console.log(newvalue)
      this.queryInfo.page = newvalue
      this.loadCompanys()
    },
    pageSizeChange(newvalue) {
      this.queryInfo.pagesize = newvalue
      // console.log(newvalue)
      this.loadCompanys()
      // console.log(this.loadCompanys)
    },
    // 搜索
    async search() {
      this.loadCompanys()
    },
    // 编辑对话框
    EdituseDialog(id) {
      this.editId = id
      this.$refs.companysref.loadEditdetail(id)
      this.isShowUserdialog = true
    },
    updateuserlist() {
      this.editId = null
      // 关闭弹窗
      this.isShowUserdialog = false
      // 刷新页面
      this.loadCompanys()
    },
    // 删除
    async deletecompanys(id) {
      try {
        await this.$confirm('此操作将永久删除用户 , 是否继续?')
        await remove(id)
        this.$message.success('删除成功')
        // 刷新页面
        this.loadCompanys()
      } catch (error) {
        this.$message.info('您取消了操作')
      }
    },
    // 修改状态
    async changeState(id, state) {
      try {
        await this.$confirm(
          state === 1 ? '已成功禁用, 是否继续?' : '已成功启用, 是否继续?'
        )
        const params = {
          id,
          state: state ? 0 : 1
        }
        await disabled(params)
        // console.log(state)
        this.$message.success('更新状态成功')
        // 刷新页面
        this.loadCompanys()
      } catch (error) {}
    }
  },
  created() {},
  mounted() {
    // 获取所有的城市
    this.cityDataList = new provinces()
    // 获取企业管理列表
    this.loadCompanys()
  }
}
</script>
<style scoped lang="less">
// .col-btn {
//   padding-left: 20px !important;
// }
.col-icon {
  text-align: right;
}
.el-table {
  margin-top: 20px;
}
.el-col-12 {
  width: 50%;
  display: flex;
  justify-content: flex-end;
}
// /deep/.el-from-state {
//   padding-right: 39px;
//   padding-left: 12px;
// }
/deep/.el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.pages {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
